<!DOCTYPE html>
<html lang="en">

<head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jinx</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <script>
        setTimeout( $(function(){
           $('.target_SecondHtml').slideDown('slow');
       }), 5 * 1000 );

    </script>
    <style>
        a.usericon{
            transition:All 0.4s ease-in-out;
        }
        a.usericon:hover{
            transform:rotate(360deg);
        }
    </style>
</head>

<body class="wow flipIn">
    <canvas id="fireworks" style="left:0;top:0;pointer-events:none;height: 100%;"></canvas>
    <div class="stars"></div>
    <script>
        $(document).ready(function () {
            var stars = 800;
            var $stars = $(".stars");
            var r = 800;
            for (var i = 0; i < stars; i++) {
                var $star = $("<div/>").addClass("star");
                $stars.append($star);
            }
            $(".star").each(function () {
                var cur = $(this);
                var s = 0.2 + (Math.random() * 1);
                var curR = r + (Math.random() * 300);
                cur.css({
                    transformOrigin: "0 0 " + curR + "px",
                    transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() * 360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s + "," + s + ")"

                })
            })
        })
        function search() {
            if (document.getElementById("search_input").value != "") {
                window.location.href = "https://www.baidu.com/s?wd=" + document.getElementById("search_input").value;
                document.getElementById("search_input").value = "";
            }
            return false;
        }
    </script>
    <script>
        $(function(){
            $('.btn')[2].onclick = function()
            {
                $('.qrcode').eq(0).fadeIn('slow');
            }

            $('.btn')[3].onclick = function()
            {
                $('.qrcode').eq(1).fadeIn('slow');
            }

            $('.qrcode').click(function(){
                $('.qrcode').fadeOut('slow');
            })
            ;
           
            $('target_SecondHtml').hover(function(){
                $(this).css(
                    {'font-size':'30px'})
            },function(){
                $(this).css(
                    {'font-size':'30px'})
            })


        }
        )
    </script>
     <div class = "header">
            <form onsubmit="return search()" class="search-box">
                <input autofocus id="search_input" class="search-txt" type="text" autocomplete="off" placeholder="Type to search">
                <div class="search-btn">
                    <i class="fas fa-search"></i> 
                </div>  
            </form>

            <a class="target_SecondHtml" href="./HTML/introduction.html">&nbsp;&nbsp;>  Click to Homepage  < </a>
            <a class="usericon"><img class="myicon" src="./images/icon.jpeg"></div></a>
            <nav> 
            <div class="middle">
                <a class="btn" href="#">
                    <i class="fab fa-github"></i>
                </a>
                <!-- github -->
                <a class="btn" href='#'>
                    <i class="fab fa-weibo"></i>
                </a>
                <!-- 微博 -->
                <a class="btn" href="#">
                    <i class="fab fa-weixin"></i>
                </a>
               
                <!-- 微信 -->
                <a class="btn" href="#">
                    <i class="fab fa-qq"></i>
                </a>
                
                <!-- QQ -->
            
                <a class="btn" href="#">
                    <i class="fab fa-twitch"></i>
                </a>
            </div>
        </nav>

    </div> 

    <script type="text/javascript" src="js/click.js"> </script>
    <script>
          !function (){ function  n(n,e,t){ return  n.getAttribute(e)||t} function  e(n){ return  document.getElementsByTagName(n)} function  t(){ var  t=e( "script" ),o=t.length,i=t[o-1]; return {l:o,z:n(i, "zIndex" ,-1),o:n(i, "opacity" ,.5),c:n(i, "color" , "0,0,0" ),n:n(i, "count" ,99)}} function  o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight} function  i(){r.clearRect(0,0,a,c); var  n,e,t,o,m,l;s.forEach( function (i,x){ for (i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null !==n.x&& null !==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle= "rgba(" +d.c+ "," +(t+.2)+ ")" ,r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)} var  a,c,u,m=document.createElement( "canvas" ),d=t(),l= "c_n" +d.l,r=m.getContext( "2d" ),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function (n){window.setTimeout(n,1e3/45)},w=Math.random,y={x: null ,y: null ,max:2e4};m.id=l,m.style.cssText= "position:fixed;top:0;left:0;z-index:" +d.z+ ";opacity:" +d.o,e( "body" )[0].appendChild(m),o(),window.onresize=o,window.onmousemove= function (n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout= function (){y.x= null ,y.y= null }; for ( var  s=[],f=0;d.n>f;f++){ var  h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})}u=s.concat([y]),setTimeout( function (){i()},100)}();  </script>
</body>

</html>